<template>
  <div id="app">
    <div id="head">
      编号：<input class="bian" type="text" v-model="code" /> 品牌名称：<input
        class="pin"
        type="text"
        v-model="productName"
      />
      <button class="btn" @click="add">添加</button>
    </div>
    <div id="search">
      品牌名称：<input
        class="sou"
        type="text"
        placeholder="请输入搜索条件"
        @input="ipt"
        v-model="ipts"
      />
    </div>
    <div id="body">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创立时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr v-for="(item, index) in arr" :key="item.id">
            <td :style="styleA">{{ item.code }}</td>
            <td :style="styleA">{{ item.productName }}</td>
            <td :style="styleA">{{ item.timer }}</td>
            <td :style="styleA"><button @click="del(index)">删除</button></td>
          </tr>
        </tbody>
      </table>
      <div class="last" style="text-align: center" v-show="arr.length === 0">
        已经没有更多数据了
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: "",
      productName: "",
      ipts: "",
      newarr: [],
      arr: [
        {
          id: 1,
          code: 1,
          productName: "品如的衣柜",
          timer: new Date().toLocaleTimeString(),
        },
        {
          id: 2,
          code: 2,
          productName: "蔡徐坤的篮球",
          timer: new Date().toLocaleTimeString(),
        },
        {
          id: 3,
          code: 3,
          productName: "大碗面",
          timer: new Date().toLocaleTimeString(),
        },
      ],
      styleA: {
        borderCollapse: "collapse",
        backgroundColor: "#fff",
        // border: "1px solid #000",
        color: " #000",
        fontWeight: "bolder",
      },
    };
  },
  mounted() {
    this.newarr = this.arr;
  },
  methods: {
    add() {
      if (this.code == "" || this.productName === "") {
        alert("code或者productName输入不能为空");
        return;
      }
      let obj = {
        id: Math.random().toString(32).substr(2),
        code: this.code,
        productName: this.productName,
        timer: new Date().toLocaleTimeString(),
      };
      this.arr.push(obj);
      this.code = "";
      this.productName = "";
    },
    del(i) {
      this.arr.splice(i, 1);
    },
    ipt() {
      //   let sarr = [];
      //   this.arr.forEach((item) => {
      //     if (item.productName.indexOf(this.ipts) !== -1) {
      //      let sarr2 = {
      //         id: item.id,
      //         code: item.code,
      //         productName: item.productName,
      //         timer: new Date().toLocaleTimeString(),
      //       };
      //       sarr.push(sarr2);
      //     }
      //     this.arr = sarr;
      //   });
      let sarr = [];
      this.newarr.forEach((item) => {
        if (item.productName.indexOf(this.ipts) !== -1) {
          sarr.push(item);
        }
      });
      this.arr = sarr;
    },
  },
};
</script>
<style scoped>
body,
html {
  margin: 0;
  padding: 0;
}

#app {
  width: 800px;
  margin: 20px auto;
}

#head {
  width: 800px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  border: 1px solid #000;
}

#head > input {
  width: 200px;
  height: 20px;
  margin-bottom: 3px;
}

#search {
  width: 800px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  border: 1px solid #000;
  margin: 10px 0;
}

#body {
  width: 800px;
  height: 50px;
}
#body > table {
  width: 800px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  background-color: #000;
  border: 1px solid #000;
  border-collapse: collapse；;
}
#body > table > thead {
  background-color: deepskyblue;
}
</style>
